<template>
  <div>
    <van-nav-bar title="统计详情">
      <template #left>
        <van-icon @click="$router.go(-1)" name="arrow-left" size="18" style="marginRight:14px"/>
        <van-icon @click="$router.go(-2)" name="cross" size="18" />
      </template>
      <template #right>
        <van-icon @click="dateModal = true"  name="tosend" size="20" />
      </template>
    </van-nav-bar>
    <van-row class="head-box">
      <van-row gutter="14">
        <van-col span="1">
          <van-icon name="todo-list-o" color="#ff6633" size="22"/>
        </van-col>
        <van-col span="6">考勤统计</van-col>
      </van-row>
      <div id="main" style="width: 100%; height: 180px"></div>
    </van-row>
    <div style="marginTop:14px">
      <van-cell icon="stop"  title="正常考勤(合计)" value="15.5天"/>
      <van-row type="flex" align="center" justify="space-between" class="title-box">
        <van-col span="6">
          <span>正常6.0天</span>
        </van-col>
        <van-col span="6">
          <span>外勤7.0天</span>
        </van-col>
        <van-col span="6">
          <span>补卡0.5天</span>
        </van-col>
      </van-row>
      <van-cell icon="stop"  title="迟到" value="0.0天"/>
      <van-cell icon="stop"  title="早退" value="0.0天"/>
      <van-cell icon="stop"  title="旷工（合计）" value="0.0天"/>
      <van-row type="flex" align="center" justify="space-between" class="title-box">
        <van-col span="6">
          <span>正常旷工0.0天</span>
        </van-col>
        <van-col span="6">
          <span>外勤旷工0.0天</span>
        </van-col>
      </van-row>
      <van-cell icon="stop"  title="请假（合计）" value="0.0天"/>
      <van-row type="flex" align="center" justify="space-between" class="title-box">
        <van-col span="6">
          <span>事假0.0天</span>
        </van-col>
        <van-col span="6">
          <span>调休0.0天</span>
        </van-col>
        <van-col span="6">
          <span>病假0.0天</span>
        </van-col>
      </van-row>
      <van-row type="flex" align="center" justify="space-between" class="title-box">
        <van-col span="6">
          <span>婚假0.0天</span>
        </van-col>
        <van-col span="6">
          <span>产假0.0天</span>
        </van-col>
        <van-col span="6">
          <span>陪产假0.0天</span>
        </van-col>
      </van-row>
      <van-row type="flex" align="center"  class="title-box">
        <van-col span="6">
          <span>丧假0.0天</span>
        </van-col>
        <van-col span="12">
          <span>年假0.0天</span>
        </van-col>
      </van-row>
    </div>
    <date-picker-modal :dateModal="dateModal" @cancel="dateModal = false" @dateModalConfrim="dateModalConfrim"/>
  </div>
</template>
<script>
import datePickerModal from '@/components/datePickerModal/datePickerModal.vue'
import echarts from '../../../assets/echart'
export default {
  components: { datePickerModal },
  name: 'total-detail',
  data () {
    return {
      dateModal: false,
      currentMonth: new Date().getMonth() + 1
    }
  },
  mounted () {
    this.getOption()
  },
  methods: {
    dateModalConfrim (value) {
      this.currentMonth = new Date(value).getMonth() + 1
      this.dateModal = false
    },
    getOption () {
      const chartDom = document.getElementById('main')
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        graphic: {
          elements: [{
            type: 'text',
            left: 'center',
            top: '50%',
            style: {
              text: '20.0天',
              textAlign: 'center',
              fill: '#000',
              fontSize: 14
            }
          }]
        },
        series: [
          {
            name: '考勤统计',
            type: 'pie',
            radius: ['50%', '65%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 14, name: '正常考勤（合计）' },
              { value: 0.5, name: '请假' },
              { value: 1.5, name: '迟到' },
              { value: 2, name: '早退' },
              { value: 0, name: '矿工（合计）' }
            ],
            color: [
              '#37A2DA',
              '#e7bcf3',
              '#FFDB5C',
              '#91ca8c',
              '#fb7293'
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.head-box{
  background-color: #fff;
  margin-top: .875rem;
  padding: 1.25rem .875rem 0 .875rem;
}
.van-cell__left-icon, .van-cell__right-icon {
  color: aqua;
}
.title-box{
  padding: .875rem;
  font-size: .75rem;
}
</style>
